<template>

<div class="h-full p-2 bg-yellow-50"
     @dragover.prevent="()=>{}"
     @drop.prevent="dragDrop">

  <table class="table">
    <!-- head -->
    <thead>
    <tr>
      <th class="w-14">
        <label>
          <input type="checkbox" class="checkbox"/>
        </label>
      </th>
      <th>Name</th>
      <th>Rate of progress</th>
      <th class="w-32">Status</th>
      <th></th>
    </tr>
    </thead>
    <tbody>

    <!-- row 1 -->
    <tr v-for="item in taskStore.getActiveTaskList">
      <th>
        <label>
          <input type="checkbox" class="checkbox"/>
        </label>
      </th>
      <td>
        <div class="flex items-center gap-3">
          <div>
            <div class="font-bold">{{ item.fileName }}</div>
            <div class="text-sm opacity-50 flex gap-4">
              <span>{{ item.startTime.toLocaleString() }}</span>
              <span>{{formatSize(item.fileSize)}} </span>
            </div>
          </div>
        </div>
      </td>
      <td>
        <progress class="progress w-56" :class="item.processValue<100?'progress-secondary':''"
                  :value="item.processValue" max="100"></progress>
        <br/>
        <span class="badge badge-ghost badge-sm">{{ item.processValue }}%</span>
      </td>
      <td>{{ formatStatus(item.status) }}</td>
      <th>
        <button v-if="item.status=='SUSPEND'" class="btn btn-ghost btn-sm">开始</button>
        <button v-if="item.status=='RUNNING'" class="btn btn-ghost btn-sm">暂停</button>
        <button class="btn btn-ghost btn-sm">x</button>
      </th>
    </tr>
    <!-- row 2 -->

    </tbody>
    <!-- foot -->
    <tfoot>

    </tfoot>
  </table>

</div>
</template>

<script setup lang="ts">
import {ref} from "vue";

import {useTaskStore} from "@/stores/task.ts";
import {formatSize, formatStatus, getDirOrFileSize, hashCode} from "@/utils/my_function.js";
import {ElMessage} from "element-plus";
import {FileTask, TaskStatus} from "@/models/task.ts";
import {useChatStore} from "@/stores/chat.ts";

const chatStore = useChatStore();
const taskStore = useTaskStore();

const fileInput = ref(null);

const openView = ()=>{
  window.electron.openView().then(r =>{
    console.log("弹框了吗 ",r)
  })
}

const onChange = () => {
  const files = fileInput.value?.files;
  if (files.length > 0) {
    console.log('选中的文件:', files);
  }
};

const confirmTask = () => {
  if (!fileInput.value?.files.length) return;

  const files = fileInput.value.files;
  // 这里可以进行文件上传操作
  console.log('准备上传文件:', files);
};

const dragDrop = (event: DragEvent) => {
  event.preventDefault(); // 阻止默认行为

  if (!chatStore.remoteIp) {
    ElMessage.warning("未连接远端 ")
    return
  }

  for (let item of event.dataTransfer.items) {
    // 只要文件
    if (item.kind === 'file') {

      const entry = item.webkitGetAsEntry();
      if (!entry) continue;


      const metadataKey = `${entry.name}-${item.getAsFile()!.size}-${item.getAsFile()!.lastModified}`;

      let filePath = window.electron.getFilePath(item.getAsFile());


      getDirOrFileSize(entry).then( (size:number) =>{

        console.debug(`>>> path = ${filePath},fileName=${entry?.name}, size=${size}, ${entry.isDirectory?"【目录】":""}, metadataKey = ${metadataKey}`)

        const task = new FileTask(hashCode(metadataKey), entry?.name, size, entry.isDirectory);
        taskStore.addToTaskList(task)

        window.chat.tcpSend(task.id,filePath).then(()=>{
          console.log("前端已经提交传输任务了 : "+filePath)
          taskStore.getTaskById(task.id).status = TaskStatus.RUNNING
        })
      })

      ElMessage.success("已添加了文件 "+entry.name)
    }
  }

}


</script>

<style scoped>

</style>